<template>
	<view>
		<view class="query_box">
			<view class="">
				<picker mode="multiSelector" @columnchange="changeCol" @change="changeLb" :range="lbList" range-key="name">
					<view class="query_box_content">
						<text>{{lbValue.length?lbList[0][lbValue[0]]['name']+'-'+lbList[1][lbValue[1]]['name']:'请选择类别'}}</text>
						<image  class="xia_la_icon" src="https://wx.gongxueke.com/static/index/arrowDown.png" mode=""></image>
					</view>
				</picker>
				
			</view>
			<view class="">
				<picker mode="selector" :range="colorArr" range-key="name" @change="changeColor">
					<view class="query_box_content">
						<text>{{colorIndex?colorArr[colorIndex]['name']:'请选择颜色'}}</text>
						<image  class="xia_la_icon" src="https://wx.gongxueke.com/static/index/arrowDown.png" mode=""></image>
					</view>
				</picker>
			</view>
			<view class="">
				<picker mode="selector" :range="pxArr" range-key="name" @change="changePxFn">
					<view class="query_box_content">
						<text>{{pxIndex?pxArr[pxIndex]['name']:'请选择排序方式'}}</text>
						<image  class="xia_la_icon" src="https://wx.gongxueke.com/static/index/arrowDown.png" mode=""></image>
					</view>
				</picker>
			</view>
			<view class="" @click="showTimeFn">
				<view class="query_box_content">
					<text>{{timeText?timeText:'请选择上架时间'}}</text>
					<image  class="xia_la_icon" src="https://wx.gongxueke.com/static/index/arrowDown.png" mode=""></image>
				</view>
			</view>
			
			<view class="time_box" v-if="showTime">
				<view class="time_box_each" @click="changeTimeValue(index)" v-for="(item,index) in timeArr" :key="index">
					<text v-if="index!==2">{{item.name}}</text>
					<picker mode="date"  @change="changeDateFn" v-if="index==2">
						<text>{{item.name}}</text>
					</picker>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			lbArr:{
				type:Array,
				default:[]
			},
			colorArr:{
				type:Array,
				default:[]
			},
			pxArr:{
				type:Array,
				default:[]
			},
			timeArr:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				colorIndex:'',
				timeText:'',
				pxIndex:'',
				lbList:[],
				lbValue:[],
				showTime:false,
			
			}
		},
		created() {
			this.handleData(0)
		},
		methods: {
			changeDateFn(e){
				this.timeText = e.detail.value
				this.$emit("changeValue",{
					type:'timeDate',
					value:e.detail.value
				})
			},
			changeTimeValue(index){
				if(index!=2){
					this.timeText = this.timeArr[index]['name']
					this.$emit("changeValue",{
						type:'time',
						value:this.timeArr[index]['id']
					})
				}else{
					
				}
				this.showTime=false
				
			},
			showTimeFn(){
				this.showTime=!this.showTime
			},
			changeLb(e){
				this.lbValue =  e.detail.value
				this.$emit("changeValue",{
					type:'lb',
					value:e.detail.value
				})
			},
			changePxFn(e){
				this.pxIndex =e.detail.value
				this.$emit("changeValue",{
					type:'px',
					value:e.detail.value
				})
			},
			changeColor(e){
				this.colorIndex =e.detail.value
				this.$emit("changeValue",{
					type:'color',
					value:e.detail.value
				})
			},
			handleData(num){
				console.log(11111)
				let lb1 =[]
				let lb2 =[]
				if(this.lbArr.length){
					this.lbArr.forEach((item)=>{
						lb1.push(item)
					})
					if(this.lbArr[num]['children']&&this.lbArr[num]['children'].length){
						this.lbArr[num]['children'].forEach((item)=>{
							lb2.push(item)
						})
					}
				}
				this.lbList = [lb1,lb2]
			},
			//改变某一行时
			changeCol(e){
				console.log(e,'e')
				var index = e.detail.column
				var value = e.detail.value
				if(!index){//改变一级分类
					this.handleData(value)
				}
			}
		}
	}
</script>

<style>
.query_box{
	width: 100%;
	display: flex;
	height: 80rpx;
	background: #e3e3e3;
	align-items: center;
	padding: 0 20rpx;
	box-sizing: border-box;
	justify-content: space-between;
	position: relative;
}
.time_box{
	position: absolute;
	top: 82rpx;
	right:10rpx;
	background: #fff;
	border-radius: 0 0 5px 5px;
	border: 1rpx solid #eee;
	width: 50vw;
	border-bottom: none;
	
}
.time_box_each{
	text-align: center;
	font-size: 24rpx;
	line-height: 60rpx;
	border-bottom:1rpx solid #eee ;
}
.query_box_content{
	display: flex;
	align-items: center;
	font-size: 24rpx;
}
.xia_la_icon{
	width: 19rpx;
	height: 12rpx;
	margin-left: 10rpx;
}
</style>
